// import { useAppDispatch, useAppSelector } from '@/store/hooks';
import { useAppDispatch } from '@/store/hooks';
import { logout } from '@/store/slices/login';
import { getUserProfile, UpdateUserProfile } from '@/store/slices/profile';
import { useInitialState } from '@/utils/use-initial-state';
import {
  Button,
  List,
  DatePicker,
  NavBar,
  Popup,
  Toast,
  Dialog,
} from 'antd-mobile';
import classNames from 'classnames';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import EditInput from './components/EditInput';
// import { useEffect } from 'react';

import styles from './index.module.scss';

const Item = List.Item;

type InputPopup = {
  visible: boolean;
  type: '' | 'name' | 'intro';
  value: string;
};
const inputPopupDefault: InputPopup = {
  // 弹出层的展示或隐藏
  visible: false,
  // 当前修改的类型
  type: '',
  //  当前修改数据的值
  value: '',
};
const ProfileEdit = () => {
  const dispatch = useAppDispatch();
  const [inputPopup, setInputPopup] = useState<InputPopup>(inputPopupDefault);
  // 展示弹出层
  const onInputshow = () => {
    setInputPopup({
      visible: true,
      type: 'name',
      value: name,
    });
  };
  // 隐藏弹出层
  const onInputclose = () => {
    setInputPopup(inputPopupDefault);
  };

  // 展示修改简介弹出层
  const onIntroShow = () => {
    setInputPopup({
      visible: true,
      type: 'intro',
      value: intro ?? '',
    });
  };
  // 更新用户信息  name或intro
  const onUpdatename = (type: 'name' | 'intro', value: string) => {
    // console.log('子组件传递过来的', name);
    dispatch(UpdateUserProfile({ [type]: value }));

    Toast.show({
      content: '更新完成',
      duration: 500,
    });
    onInputclose();
  };

  const { Userprofile } = useInitialState(getUserProfile, 'profile');
  const { photo, name, intro, gender, birthday } = Userprofile;
  const navigate = useNavigate();
  // 推出功能
  const onDialog = () => {
    const handler = Dialog.show({
      title: '温馨提示',
      content: '是否退出',
      // 只要点击按钮就会关闭对话框
      closeOnAction: true,
      actions: [
        [
          {
            key: 'cancel',
            text: '取消',
            style: {
              color: '#999',
            },
            /*  onClick: () => {
              handler.close();
            }, */
          },
          {
            style: {
              color: 'red',
            },
            key: 'delete',
            text: '确认',
            // 加粗
            // bold: true,
            //  主题颜色
            // danger: true,
            onClick: () => {
              dispatch(logout());
              /*  Toast.show({
                content: '已退出',
                duration: 600,
                // 关闭时执行的回调
                afterClose: () => {
                  handler.close();
                  navigate('/login');
                },
              }); */
              navigate('/login');
            },
          },
        ],
      ],
    });
  };
  return (
    <div className={styles.root}>
      <div className="content">
        {/* 标题 */}
        <NavBar
          style={{
            '--border-bottom': '1px solid #F0F0F0',
          }}
        >
          个人信息
        </NavBar>

        <div className="wrapper">
          {/* 列表 */}
          <List className="profile-list">
            {/* 列表项 */}
            <Item
              extra={
                <span className="avatar-wrapper">
                  <img
                    width={24}
                    height={24}
                    src={
                      photo || 'http://toutiao.itheima.net/images/user_head.jpg'
                    }
                    alt=""
                  />
                </span>
              }
              arrow
            >
              头像
            </Item>
            <Item arrow extra={name} onClick={onInputshow}>
              昵称
            </Item>
            <Item
              arrow
              extra={
                <span
                  className={classNames('intro', 'normal')}
                  onClick={onIntroShow}
                >
                  {intro || '未填写'}
                </span>
              }
            >
              简介
            </Item>
          </List>

          <List className="profile-list">
            <Item arrow extra={gender === 1 ? '男' : '女'}>
              性别
            </Item>
            <Item arrow extra={birthday}>
              生日
            </Item>
          </List>

          <DatePicker
            visible={false}
            value={new Date()}
            title="选择年月日"
            min={new Date(1900, 0, 1, 0, 0, 0)}
            max={new Date()}
          />
        </div>

        <div className="logout">
          <Button className="btn" onClick={onDialog}>
            退出登录
          </Button>
        </div>
      </div>
      <Popup visible={inputPopup.visible} position={'right'}>
        <EditInput
          onClose={onInputclose}
          value={inputPopup.value}
          type={inputPopup.type}
          onUpdatename={onUpdatename}
          // onInputshow={onInputshow}
          key={inputPopup.type}
        />
      </Popup>
    </div>
  );
};

export default ProfileEdit;
